import React, {useEffect, useState} from 'react';
import {Switch, Table, Image, Button, message, Pagination} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {deteleFile, getFileList} from "../../../api/attachment";
import {BASE_URL} from "../../../utils/url";

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}



const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 40,
        address: 'London Park',
    },
];
interface FileType{
    id:number,
    driver:string,
    extension:string,
    md5:string,
    mime:string,
    code:string,
    name:string,
    path:string,
    sha1:string,
    size:string,
    status:string,
    url:string,
}
const Index: React.FC = () =>{
    const columns: ColumnsType<FileType> = [
        {
            title: 'id',
            width: 100,
            dataIndex: 'id',
            key: 'id',
            fixed: 'left',
        },
        {
            title: '文件名',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: '大小kb',
            width: 100,
            dataIndex: 'size',
            key: 'size',
            fixed: 'left',
            sorter: true,
        },

        {
            title: '文件格式',
            width: 100,
            dataIndex: 'extension',
            key: 'extension',
            fixed: 'left',
        },

        {
            title: '缩略图',
            width: 100,
            dataIndex: 'url',
            key: 'url',
            fixed: 'left',
            render: (_, record:any) =>
                <Image
                    width={200}
                    src={`${BASE_URL}${record.url}`}
                />
        },

        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 100,
            render: (_,record:FileType|any) => <Button type="primary" danger onClick={()=>removeFile(record.id)}>删除</Button>,
        },
    ];
    const [paginate,setPaginate] = useState({"page":1,"per_page":10,"total":0})
    const [fileList,setFileList] = useState<FileType[]>([])
    const removeFile = (id:number)=>{
        deteleFile(id).then(res=>{
            if(res.data.code===1){
                getAllList(paginate)
                return message.success(res.data.msg)
            }
        })
    }
    const handlePage = ()=>{

    }
    useEffect(()=>{
        getAllList(paginate)
    },[])
    const getAllList = (paginate:any)=>{
        getFileList(paginate).then(res=>{
            if(res.data.code===1){
                setFileList(res.data.data.list)
                setPaginate({"page":res.data.data.page,"per_page":res.data.data.per_page,"total":res.data.data.count})
            }
        })
    }
    return (
        <>
    <Table pagination={false} rowKey={(fileList)=>fileList.id} columns={columns} dataSource={fileList} scroll={{ x: 1300 }} />
            <Pagination current={paginate.page}

                        style={{ display: 'flex',marginTop: '25px',justifyContent: 'right'}}
                        total={paginate.total} onChange={(page:number,perPage:number)=>{getAllList({page,perPage})}}  />
        </>
    )
}

export default Index;
